---
import LayoutBase from '@/layouts/layout-base.astro';
import { Image } from 'astro:assets';
import { links, tagColorMap } from './links'
---

<LayoutBase
  title="实践"
  description="wudandong | 实践"
>
  <div class="x-main">
    <div class="card-grid">
      {
        links.map((link) => (
          <div class="card" data-url={link.url} data-type={link.type}>
            <Image src={link.img} alt={link.title}/>
            <div class="card-content">
              <div class="card-title">{link.title}</div>
              <div class="card-tags">
                {
                  link.tags.map((tag) => (
                    <span class="tag" style={`background: ${tagColorMap[tag] ? tagColorMap[tag]: '#ccc'}`}>{tag}</span>
                  ))
                }
              </div>
            </div>
          </div>
        ))
      }
    </div>
  </div>
</LayoutBase>

<script>
  const cards = document.querySelectorAll('.card-grid .card');
  cards.forEach((card) => {
    card.addEventListener('click', () => {
      const url = card.getAttribute('data-url');
      if(url) {
        const type = card.getAttribute('data-type');
        if(type === 'a') {
          window.open(url)
        } else {
          location.href = url
        }
      }
    });
  });
</script>

<style>
  .x-main {
    @apply p-8 mx-auto max-w-[1200px];
  }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  .card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s;
    cursor: pointer;
    border: 1px solid #e3e3e3;
  }
  .card:hover {
    transform: translateY(-5px);
  }
  .card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
  .card-content {
    border-top: 1px solid #e3e3e3;
    padding: 15px;
  }
  .card-title {
    font-size: 1.25em;
    margin-bottom: 10px;
  }
  .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .tag {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
  }
</style>